<template>
  <div class="points-page">
    <div class="points-page-info" ref="info">
      <div class="tit">总积分：</div>
      <div class="count">{{ userInfo.integrals }}</div>
      <router-link to="/rules" class="rules">
        <van-icon name="question-o" size="0.5rem" class="icon" />积分规则
      </router-link>
    </div>
    <Pad class="points-page-list" :style="listStyle">
      <cube-scroll
        ref="scroll"
        :data="data"
        :options="options"
        @pulling-up="onPullingUp"
      >
        <div class="item" v-for="item in data" :key="item.id">
          <span class="date">{{ item.createTime }}</span>
          <span class="bean">+{{ item.beanPaste.number }}</span>
        </div>
      </cube-scroll>
      <!-- <no-data v-else :img="require('./img/noData.png')" text="暂无邀请收益哦～" /> -->
    </Pad>
  </div>
</template>

<script>
import Pad from "@/components/pad";
// import noData from "@/components/noData";
import { beansList } from "@/api/bean";
import { mapGetters } from "vuex";
import store from "@/store";
export default {
  data() {
    return {
      listStyle: {
        height: 0
      },
      data: [],
      options: {
        // pullDownRefresh: true,
        pullUpLoad: false
      },
      queryParams: {
        current: 1,
        size: 10
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  created() {
    this.getList();
  },
  mounted() {
    this.listStyle = {
      height: `${window.outerHeight - this.$refs.info.offsetHeight}px`
    };
  },
  methods: {
    getList() {
      beansList(this.queryParams).then(({ data }) => {
        console.log(data);
        this.data = [...this.data, ...data.records];
        if (data.current < data.pages) {
          this.options.pullUpLoad = true;
        } else {
          this.options.pullUpLoad = false;
        }
      });
    },
    onPullingUp() {
      console.log("上拉加载");
      this.queryParams.current += 1;
      beansList(this.queryParams).then(({ data }) => {
        console.log(data);
        this.data = [...this.data, ...data.records];
        this.$refs.scroll.forceUpdate(false, true);
        if (data.current >= data.pages) {
          this.options.pullUpLoad = false;
          this.$refs.scroll.refresh();
        }
      });
    }
  },
  components: {
    Pad,
    // noData
  }
};
</script>

<style lang='scss'>
.points-page {
  height: 100%;
  background: #f7f7fb;
  &-info {
    background: url(./img/bg.png) no-repeat center;
    background-size: cover;
    height: 4.96rem /* 372/75 */;
    color: #fff;
    padding-top: 2.133333rem /* 160/75 */;
    padding-left: 0.4rem /* 30/75 */;
    .tit {
      font-size: 0.32rem /* 24/75 */;
      font-weight: 400;
      margin-bottom: 0.506667rem /* 38/75 */;
    }
    .count {
      font-size: 1.093333rem /* 82/75 */;
      font-weight: 400;
      i {
        font-size: 0.613333rem /* 46/75 */;
      }
    }
    .rules {
      position: absolute;
      font-size: 0.32rem /* 24/75 */;
      top: 1.866667rem /* 140/75 */;
      right: 0.453333rem /* 34/75 */;
      display: flex;
      align-items: center;
      .icon {
        margin-right: 0.266667rem /* 20/75 */;
      }
    }
  }

  &-list {
    padding-bottom: 0 !important;
    .item {
      margin-bottom: 0.4rem /* 30/75 */;
      background: #fff;
      height: 1.6rem /* 120/75 */;
      border-radius: 0.213333rem /* 16/75 */;
      color: #333333;
      padding: 0 0.4rem /* 30/75 */;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .date {
        font-size: 0.4rem /* 30/75 */;
      }
      .bean {
        font-size: 0.533333rem /* 40/75 */;
      }
    }
  }

  .item-date {
    font-size: 0.4rem /* 30/75 */;
    font-weight: normal;
    color: rgba(51, 51, 51, 1);
    line-height: 0.533333rem /* 40/75 */;
  }
  .van-collapse-item__content {
    padding: 0;
  }
  .van-collapse {
    &:after {
      display: none;
    }
  }
  .van-collapse-item {
    border-radius: 0.213333rem /* 16/75 */;
    margin-bottom: 0.4rem /* 30/75 */;
    overflow: hidden;
  }
  .countClass {
    color: #333333;
    font-size: 0.533333rem /* 40/75 */;
  }
  .detailClass {
    font-size: 0.4rem /* 30/75 */;
    color: #333333;
    line-height: 0.533333rem /* 40/75 */;
  }
}
</style>
